<template>
    <div class='confirmPay'>
        <el-dialog title="完成服务" visible @close="$emit('close')" width="1200px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="formLoading">
                <!-- <el-col :span="24">
                        <el-form-item label="完成图片" prop="image">
                            <el-upload class="avatar-uploader" :action="$uploadUrl" :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                                <img v-if="form.image" :src="form.image" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col> -->
                <!-- <el-upload :action="$uploadUrl" :on-progress="uploadVideoProcess"
                    :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :file-list="fileList"
                    :on-remove="handleRemoveVideoList" :limit="1" :on-preview="handleDownload" :show-file-list="false"
                    :on-exceed="handleExceed">
                    <div v-if="showVideoPath" style="position: relative">
                        <video :src="showVideoPath" class="avatar video-avatar" controls="controls">
                            您的浏览器不支持视频播放
                        </video>
                        <i class="el-icon-error deletViedo" @click.stop="romoveVideo"></i>
                    </div>
                    <i v-if="!showVideoPath" class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip" style="color: red">
                        最多可以上传1个视频，建议大小50M，推荐格式mp4
                    </div>
                </el-upload>  :on-remove="handleRemove"-->
                <el-form-item label="完成图片" prop="images">
                    <el-upload :action="$uploadUrl" list-type="picture-card"
                        :file-list="fileList" :on-success="(res, file) => handleAvatarSuccess(res, file)"
                        :before-upload="beforeUpload" :on-change="onchange" :limit="4" :on-exceed="masterFileMax"
                        :class="{ hide: hideUploadBtn }" >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                        <div slot="tip" class="el-upload__tip text-error">请上传图片大小在500KB以内，最多只能上传4张图片</div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="完成备注" prop="notes">
                        <el-input v-model="form.notes" type="textarea" rows="4" placeholder="请输入完成备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
            <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> -->
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { setServiceOrderComplete} from "@/api/order/order.js"
export default {
    name: 'confirmPay',
    props: {
        orderNo: {
            type: String,
        }

    },
    components: {

    },
    data() {
        return {
            showVideoPath: "",
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            limit: 4,
            picturesList: [],
            hideUploadBtn: false,
            loading: false,
            formLoading: false,
            form: {
                order_no: this.orderNo,
                slider: [],
                images: '',
                notes: '',
            },
            rules: {
                image: [{ required: true, message: '请上传支付凭证', trigger: 'blur' }],
                remark: [{ required: true, message: '请输入确认支付说明', trigger: 'blur' }],
            },

        }
    },
    // watch: {
    //     filelist: {
    //         handler: async function (val1, val2) {
    //             if (val1 && val1?.length && val1[0].uploadUrl) {
    //                 this.showVideoPath = `${process.env.VUE_APP_URL}${val1[0]?.uploadUrl}`
    //             }
    //         },
    //         immediate: true,
    //         deep: true,
    //     },
    // },
    created() {

    },
    methods: {

        beforeUpload(file) {
            return new Promise((resolve, reject) => {
                if (file.size / (1024 * 1024) > 0.5) {  // 限制文件大小
                    this.$message.warning(`当前限制文件大小不能大于0.5M`)
                    return reject(false)
                } else {
                    resolve(true)
                }
            })
            // return new Promise((resolve, reject) => {
            // this.limitFileRate(800, 450, file).then((res) => {
            //     file.isFlag = res
            //     if (file.isFlag) {
            //         return resolve(true)
            //     } else {
            //         return reject(false)
            //     }
            // })
            // })
        },
        handleAvatarSuccess(res, file) {
            console.log(res.data[0].fileurl, 'res')
            let url = res.data[0].fileurl
            this.fileList.push({
                'url': url
            })
            console.log("上传成功的钩子", this.fileList)
            if (this.fileList.length >= 4) {
                this.hideUploadBtn = true
            }
            this.picturesList = this.form.slider
            this.picturesList.push(res.data[0].fileurl)
            console.log(this.picturesList, '图片列表')
            this.form.images = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.images, "传参")
            // this.form.cover = this.picturesList[0]
            // console.log("上传成功的钩子", file);
        },
        onchange(file, fileList) {
            console.log("上传成功", file, fileList);
            if (this.fileList.length >= 4) {
                this.hideUploadBtn = true
            }
            console.log(this.form.slider, '++++')
            // this.$set(this.form, 'thumbs', fileList)
            this.form.images = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.images, "传参")
            // this.form.cover = this.picturesList[0]
        },
        masterFileMax(files, fileList) {
            this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.picturesList = this.form.slider
            this.picturesList.splice(this.fileList.indexOf(file), 1);
            this.fileList.splice(this.fileList.indexOf(file), 1);
            console.log(this.fileList)
            if (this.fileList.length >= 4) {
                this.hideUploadBtn = true
            } else { this.hideUploadBtn = false }
            console.log(this.picturesList, 'remove')
            this.form.images = this.picturesList.length > 0 ? this.picturesList.join("|") : null
            console.log(this.form.images, "传参")
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //上传前回调
        beforeUploadVideo(file) {
            let fileSize = file.size / 1024 / 1024 < 50
            if (
                ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(
                    file.type,
                ) == -1
            ) {
                this.msgError('请上传正确的视频格式')
                return false
            }
            if (!fileSize) {
                this.msgError('视频大小不能超过50MB')
                return false
            }
        },
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true
            this.videoUploadPercent = file.percentage.toFixed(0) * 1
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            debugger
            const formData = new FormData()
            formData.append('file', file.raw)

            this.fileList.push({
                uploadUrl: res.result.url,
                uploadType: 3,
                fileType: res.result.fileType,
                fileSize: res.result.size,
                uploadName: file.name,
                // attachmentId: res?.attachmentId,
                ...this.viedo,
            })
        },
        async handleRemoveVideoList(file) {
            if (!file.attachmentId) {
                this.fileList = this.fileList.filter(
                    (item) => item.uid != file.uid,
                )
                return
            }
            let attachmentId = file.attachmentId
            const res = await deleteBAttachment({
                attachmentId,
            })
            if (res.code == 200) {
                this.fileList = this.fileList.filter(
                    (item) => item.uid != file.uid,
                )
            }
        },
        handleDownload(file) {
            this.$confirm('是否下载当前视频？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '正在下载',
                    })
                    const elink = document.createElement('a')

                    elink.href = file.url

                    elink.setAttribute('download', file.name)

                    elink.style.display = 'none'

                    document.body.appendChild(elink)

                    setTimeout(() => {
                        undefined

                        elink.click()

                        document.body.removeChild(elink)
                    }, 66)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消下载',
                    })
                })
        },
        handleExceed() {
            this.msgWaring('最多上传一个视频文件')
        },
        romoveVideo() {
            this.$confirm('确定删除模板？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                // if (this.contentAttachmentFileList && this.contentAttachmentFileList.length) {
                //     let attachmentId = this.contentAttachmentFileList[0]?.attachmentId
                //     const res = await apiConfig.deleteBAttachment({
                //         attachmentId: attachmentId,
                //     })
                //     if (res.code == 200) {
                //         this.showVideoPath = ''
                //         this.EditorForm.contentAttachmentList = []
                //         this.form.contentAttachmentList = []
                //     }
                // } else {
                //     this.showVideoPath = ''
                //     this.EditorForm.contentAttachmentList = []
                //     this.form.contentAttachmentList = []
                // }
            })
        },
        close() {
            this.$emit('close');
        },
        // handleAvatarSuccess(res, file) {
        //     this.$set(this.form, 'image', res.data[0].fileurl)
        // },
        submit: throttle(function () {
            setServiceOrderComplete(this.form).then(res => {
                this.msgSuccess("操作成功！");
                this.close()
                this.formLoading = false;
                this.$emit('load')
            }).catch(() => {
                this.formLoading = false;
            })
        }, 1000, { trailing: false })
    },
}

</script>
<style scoped lang='scss'>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>